<template>
  <view class="mm-list-container" :style="{ opacity }">
    <!-- 滑动操作列表 -->
    <w-swipe-action v-if="options.length > 0">
      <view
        class="mm-list-container__item"
        v-for="(item, index) in list"
        :key="index"
      >
        <w-swipe-action-item
          :right-options="options"
          @click="swipeClick(item, index, $event)"
        >
          <view
            class="mm-list-container__item__wrap"
            @click="itemClick(item)"
            :hover-class="disabled ? '' : 'navigator-hover'"
            :hover-stay-time="200"
          >
            <list-item
              :img-size="imgSize"
              :circle="circle"
              :item="item"
              :slots="$slots"
              :rightWidth="rightWidth"
              :allWidth="allWidth"
            >
              <slot :item="item"></slot>
            </list-item>
            <view class="rightSlot">
              <slot name="right" :item="item"></slot>
            </view>
          </view>
        </w-swipe-action-item>
      </view>
    </w-swipe-action>

    <!-- 普通列表 -->
    <block v-else>
      <view
        class="mm-list-container__item"
        v-for="(item, index) in list"
        :key="index"
      >
        <view
          class="mm-list-container__item__wrap"
          @click="itemClick(item)"
          :hover-class="disabled ? '' : 'navigator-hover'"
          :hover-stay-time="200"
        >
          <list-item
            :img-size="imgSize"
            :circle="circle"
            :item="item"
            :slots="$slots"
            :rightWidth="rightWidth"
            :allWidth="allWidth"
          >
            <slot :item="item"></slot>
          </list-item>
          <view class="rightSlot">
            <slot name="right" :item="item"></slot>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import listItem from "./list-item.vue";
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    // 图片的尺寸
    imgSize: {
      type: Array,
      default: () => [100, 100],
    },
    // 图片展示方式是否是圆形
    circle: {
      type: Boolean,
      default: false,
    },
    // 滑动操作栏按钮 例如['删除'] 顺序从右到左
    btns: {
      type: Array,
      default: () => [],
    },
    // swiperAction颜色配置 顺序从右到左
    colors: {
      type: Array,
      default: () => [],
    },
    // 是否禁止列表的点击态
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    // 滑动操作栏配置
    options() {
      let colors =
        this.colors.length == 0
          ? [this.$theme.error, this.$theme.warning]
          : this.colors;
      let options = this.btns.map((item, index) => ({
        text: item,
        style: {
          backgroundColor: colors[index],
        },
      }));
      return options.reverse();
    },
  },
  data() {
    return {
      allWidth: 750,
      rightWidth: 0,
      opacity: 0, // 列表透明度，隐藏布局宽度发生改变的过程
    };
  },
  components: {
    listItem,
  },
  watch: {
    list: {
      handler(newValue, oldValue) {
        if (
          (oldValue === undefined || oldValue.length == 0) &&
          newValue.length > 0
        ) {
          this.$nextTick(() => {
            const query = uni.createSelectorQuery().in(this);
            query
              .select(".mm-list-container")
              .boundingClientRect((data) => {
                this.allWidth = data.width;
              })
              .exec();
            const query2 = uni.createSelectorQuery().in(this);
            query2
              .select(".rightSlot")
              .boundingClientRect((data) => {
                this.rightWidth = data.width;
                this.$nextTick(() => {
                  this.opacity = 1;
                });
              })
              .exec();
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 列表元素点击
    itemClick(item) {
      this.$emit("click", item);
    },
    // 滑动操作栏点击事件
    swipeClick(item, index, e) {
      this.$emit("swipeClick", {
        item,
        index,
        btn: e.content.text,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mm-list-container {
  box-sizing: border-box;
  transition: opacity 0.3s ease;
  &__item {
    border-radius: 10rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    opacity: 0.99; // 解决transform在移动中overflow失效
    &:last-child {
      margin-bottom: 0;
    }
    &__wrap {
      background-color: #ffffff;
      display: flex;
      width: 100%;
      // 解决左右没有居中对齐
      .rightSlot {
        transform: translateY(-1px);
      }
      // #ifdef MP-WEIXIN
      list-item {
        flex: 1;
      }
      // #endif
      // #ifdef APP-VUE
      ::v-deep .mm-list {
        flex: 1;
      }
      // #endif
    }
  }
}
</style>